<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
               margin: 0;
               padding: 0;
           }
          #main{
               width: 400px;
               
               margin:0 auto;
               display: flex;
               flex-direction: column;
               justify-content: flex-end;
              
           }
          #textarea{
           width: 400px;
          }
           #div{
               width: 400px;
               height: 300px;
               border: 1px solid #ccc;
               margin-bottom: 20px;
               overflow: auto;
              word-wrap: break-word;
              overflow: auto;
              position: relative;
           }
           #div #bg{
            width: 400px;
            position: absolute;
            bottom: 0;
            right: 0;
            overflow: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;

           }
           #main-bottom {
              
               display: flex;
               justify-content: center;
           }
           #main-bottom  #reset{
               margin-right: 20px;
           }
           .div2{
             
               margin-bottom: 20px;
              display: flex;
              justify-content: flex-end;
              margin-right: 10px;
              overflow: hidden;
              
           }
           .text{
               line-height: 26px;
               /* width: 360px; */
               background: pink;
              margin: 0;
              margin-right: 10px;
               display:inline-block;
               /* border:1px solid #000;  */
               word-break: break-all;
               word-wrap: break-word;
               border-radius: 5px;
              
               
           }
           .logo{
               width: 20px;
               height: 20px;
               background: #000;
               margin: 0;
               float:right;
               margin-right: 0;
           }
   
       </style>
</head>
<body>
        <div id="main">
                <div id="div">
                    <div id="bg"></div>
                </div>
                <textarea name="" id="textarea" cols="32" rows="10"></textarea>
             </div>
             <div id="main-bottom">
                    <button id="reset" >重置
                    <button id="submit" >提交
                    <button id="receive">转换
                  
             </div>
             <script>
                 function $(e){
                     return document.querySelector(e);
                 }
                 $('#textarea').onkeyup=function(e){
                    if(e.keyCode ==13&&e.ctrlKey){
                        fun();
                    }
                 };
                 function fun(e){
                   
                        //  $('#div').innerText=this.value;
                        if($('#textarea').value.length>0){
                            var div2=document.createElement('div');
                            var logo=document.createElement('div');
                            var text=document.createElement('div');
                            div2.className='div2';
                            text.className='text';
                            logo.className='logo';
                            div2.appendChild(text);
                            div2.appendChild(logo);
                            text.innerText=$('#textarea').value;
                            $('#bg').appendChild(div2);
                            $('textarea').value='';
                        }else{
                            alert('请输入值！！！')
                        }
                       
                     }
                
                 $('#submit').onclick=fun;
                      
        
                 $('#reset').onclick=function(){
                    $('textarea').value='';
                 
                 }
                 $('#receive').onclick=function(){
                    if($('#textarea').value.length>0){
                            var div2=document.createElement('div');
                            var logo=document.createElement('div');
                            var text=document.createElement('div');
                            div2.className='div2';
                            text.className='text';
                            logo.className='logo';
                            div2.style.justifyContent="flex-start";
                            logo.style.marginRight="10px";
                            logo.style.float="left";
                            div2.appendChild(logo);
                            div2.appendChild(text);
                            text.innerText=$('#textarea').value;
                            $('#bg').appendChild(div2);
                            $('textarea').value='';
                        }else{
                            alert('请输入值！！！')
                        }
                       
                 }
             </script>
</body>
</html>